<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../jquery-3.3.1.js">
        
    </script>
</head>

<body>
    <p>单线程 ：一次时间内只能做一件事情</p>
    <!-- 原因：避免DOM 渲染冲突 -->
    <script>
        /* (function () {
                    var i, sum = 0;
                    console.log("开始循环")
                    // for (var i=0; i < 1000000000;i++) {
                    //    sum++;
                    // }
                    // 短暂卡顿才输出以下内容；
                    console.log("循环结束")
                })(); */

        // 异步
        /* (function () {

            console.log(100);
            setTimeout(function () {
                console.log(200)
            }, 1000)
            console.log(300);
            console.log(400);
            // 最终结果 100 300 400 200
        })(); */

        /* (function () {
            console.log("请求开始");
            var xhr=null; 
            var res;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else{
                xhr=new ActiveXObject('Microsoft.XMLHTTP');
            }

            xhr.onreadystatechange=function(){
                if((xhr.status===200||xhr.status===204) && xhr.state===4 ){
                    res=xhr.responseText;
                    console.log("请求成功");
                }
            }
            
            xhr.onerror=function(){
                console.log("请求失败");
            }

            xhr.open('get','./data.json',true);
            xhr.send(null);

            console.log("请求结束");
        })() */

        (function () {
            //同步任务执行完后 1000ms后放入异步队列中 
            setTimeout(function () {
                console.log(1);
            }, 1000)
            //同步任务执行完后 4ms后放入异步队列中 因为默认最少是4ms 
            setTimeout(function () {
                console.log(2);
            })

            //同步任务
            console.log(3);

            // 3 2 1
        })();

        (function () {
            // 同步任务执行完后 待成功请求之后才放入异步队列中  时间不确定
            $.ajax({
                url:'./data.json',
                method:"get",
                success:function(data){
                    console.log('a');
                }
            })

             //同步任务执行完后 1000ms后放入异步队列中 
            setTimeout(function () {
                console.log("b");
            }, 1000)
            //同步任务执行完后 4ms后放入异步队列中 因为默认最少是4ms 
            setTimeout(function () {
                console.log('c');
            })
            console.log('d')
            
            // 最终结果：
            // d c b a 或 d c a b 或 d a c b
        })();
    </script>
</body>

</html>